<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
    <style>
    body { margin: 0; padding: 0;}

    .local-info { padding: 10px 20px; position: fixed; top: 0; width: 100%; z-index: 999; background: #cccccc; box-sizing: border-box; }
    .refresh-btn { position: absolute; top: 10px; right: 30px;}
    pre { outline: 1px solid #aaaaaa; padding: 5px; margin: 5px; }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }
    button { background-color: #428bca; border-color: #357ebd; color: #fff; text-align: center; vertical-align: middle; cursor: pointer;}
    .dialogue { background-color: #fff9e0; position: relative; border: 1px solid #aaaaaa; border-radius: 10px; padding: 10px; margin: 10px; }
    .dialogue header { text-align: center; font-weight: 700; margin-bottom: 10px; border-bottom: 1px solid #aaaaaa; }
    .pause-btn,.stop-update-chart-btn,.delete-btn { position: fixed; right: 20px; background-color: #FF9900; width: 50px; height: 50px; border-radius: 50%; font-size: 10px;}
    .pause-btn { bottom: 160px; }
    .stop-update-chart-btn { bottom: 90px; }
    .delete-btn { bottom: 20px; background-color: #FF1212; }
    </style>
    <title>WebBT Torrent Test</title>
</head>
<body style="padding-top: 65px;">
    <div class="local-info">
        <div>PeerId: <span id="peer_id">??????????????</span></div>
        <div class="top-tip">初始化中...</div>
        <button class="refresh-btn">刷新页面</button>
    </div>

    <div class="share-dialogue dialogue" hidden>
        <header>分享</header>
        TorrentShareInfo:<pre class="torrent-share-info"></pre><br>
        <input class="file-input" type="file" name="files" placeholder="选择分享的文件"><br>
        <button class="share-btn">分享</button>
    </div>

    <div class="download-dialogue dialogue" hidden>
        <header>下载 (保存路径: <span class="download-dir"></span>) </header>
        TorrentShareInfo:<br><textarea class="torrent-share-info" cols="50" rows="8" style="width: 100%"></textarea><br>
        <button class="download-btn">开始下载</button>
    </div>

    <div class="torrent-dialogue" hidden>
        <button class="pause-btn" style="z-index: 99;">暂停下载</button>
        <button class="stop-update-chart-btn" style="z-index: 99;">停止刷新</button>
        <button class="delete-btn" style="z-index: 99;">删除</button>
        <div id="up-and-down-chart" style="width: 620px;height:140px;"></div>
        <div id="peers-chart" style="width: 620px;height:300px;"></div>
        <div id="bitfield-chart" style="width: 620px;height:300px;"></div>
    </div>

    <script src="./common/inner_services.js"></script>
    <script src="./common/util.js"></script>
    <script src="./main.js"></script>
</body>
</html>
